<template>
  <div class="w h" style="overflow-y:auto">
    <header class="page-header">
      <div class="header-tool">
        <div class="tool-setting" @click.stop="profileSetting = !profileSetting">
          <img src="@/assets/main/imgs/profile-more.png" />
          <div v-if="profileSetting" class="setting-li">
            <div class="li-item" @click="goSetting">设置</div>
            <div class="li-item" @click="goLogout">退出</div>
          </div>
        </div>
      </div>
      <div class="header-user-photo">
        <div class="user-photo">
          <img v-if="!userInfo.img" src="@/assets/main/imgs/user-photo.png" />
          <img v-else :src="userInfo.img">
        </div>
      </div>
      <div>
        <div class="user-name">{{ userName || carId }}</div>
        <div class="user-email">{{ userInfo.mail }}</div>
      </div>
    </header>
    <main class="page-main">
      <div class="main-menu">
        <div class="menu-item" :class="`menu-item-${i + 1}`" v-for="(item, i) in menuListInfo" :key="i"
          @click="goPage(item)">
          <div class="w f-c">
            <img class="menu-icon" :src="item.image" />
          </div>
          <div class="menu-text-info f-c a-i-c">
            <div>
              <div class="menu-title">{{ item.label }}</div>
              <div class="menu-subheading" v-if="item.subheading">{{ item.subheading }}</div>
            </div>
          </div>
        </div>
      </div>
      <page-footer isMainPage> 已经到达底部了 </page-footer>
    </main>
  </div>
</template>

<script lang="ts">
import pageBase from '@/views/mixins/page-base';
import { PageFrame, PageFooter } from '@/importComponents';
import { type Store } from 'vuex';

export default {
  mixins: [pageBase],
  components: { PageFrame, PageFooter },
  data() {
    return {
      profileSetting: false,
      menuList: [
        { icon: 'profile', label: '个人中心', subheading: '', },
        { icon: 'order', label: '工单统计', subheading: '8 Task Incomplete', },
        { icon: 'history', label: '历史记录', subheading: '80 Task', },
        { icon: 'order-helper', label: '工单求助', subheading: '1 Task', },
        { icon: 'order-work', label: '工单安排', subheading: '8 Task Pending', },
        // { icon: 'wait', label: '待添加', subheading: '', },
        { icon: 'wait', label: '点检系统', subheading: '', router: { name: 'profile-spot-check' } },
      ] as MenuObject[]
    }
  },
  computed: {
    menuListInfo(): MenuObject[] {
      return this.menuList.map(item => {
        item.image = new URL(`../../../assets/main/profile/${item.icon}.png`, import.meta.url);
        return item;
      })
    }
  },
  methods: {
    goPage(item: { router: string }) {
      if (!item.router) {
        this.$toast('当前功能暂未开放');
        return;
      }
      this.$router.push(item.router);
    },


    goLogout() {
      this.$dialog.confirm({
        title: '警告',
        message: '確定退出吗？',
        beforeClose: (action) => {
          return new Promise((resolve) => {
            if (action === 'confirm') {

              /**
               * 清除token等信息
               */
              (this.$store as Store<any>).commit('user/loginOut', true);
              setTimeout(() => {
                this.goBackOrForward(0);
              }, 200);
              resolve(true);
            } else {
              resolve(true);
            }
          });
        }
      })
    },
    goSetting() {
      this.$router.push({ name: 'profile-setting' });
    }
  }
}


export type MenuObject = {
  icon: string, label: string, subheading: string, image: URL,
}

</script>

<style lang="scss" scoped>
.page-header {
  @extend .u-s-n;

  .header-tool {
    @extend .f-e;
    padding-right: 25px;

    .tool-setting {
      @extend .f-c, .a-i-c, .u-s-n;
      margin-top: 52px;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: #ffffffff;
      box-shadow: -3px 7px 13px 0px #f1f7ffff;


      position: relative;

      .setting-li {
        top: 60px;
        right: -6px;
        position: absolute;
        width: 127px;
        height: 118px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -3px 20px 0px rgba(219, 218, 218, 0.25);
        box-sizing: border-box;
        padding: 26px;

        .li-item {
          position: relative;
          font-size: 16px;
          font-weight: 400;
          color: rgba(16, 39, 90, 1);
          text-align: left;
          vertical-align: top;
          padding-left: 40px;

          &:first-child {
            margin-bottom: 20px;

            &::before {
              content: '';
              position: absolute;
              top: 2px;
              left: 2px;
              background: url('@/assets/main/profile/setting.png');
              background-size: 18px 18px;
              width: 18px;
              height: 18px;
            }
          }

          &:last-child {
            &::before {
              content: '';
              position: absolute;
              top: 2px;
              left: 2px;
              background: url('@/assets/main/profile/logout.png');
              background-size: 18px 18px;
              width: 18px;
              height: 18px;
            }
          }
        }

      }

    }
  }

  .header-user-photo {
    @extend .f-c, .a-i-c, .w;

    .user-photo {
      overflow: hidden;
      box-shadow: -3px 7px 13px 0px #f1f7ffff;
      @include circle(#ffffff, 78px);

      img {
        @extend .w, .h, .f-c, .a-i-c;
      }
    }
  }

  .user-name {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: rgba(16, 39, 90, 1);
    @extend .t-c;
  }

  .user-email {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(16, 39, 90, 1);
    @extend .t-c;
  }
}

.page-main {
  @extend .u-s-n;
  padding: 30px;
  box-sizing: border-box;

  .main-menu {
    @extend .f-b-w, .box-b;

    .menu-item {
      box-sizing: border-box;
      border-radius: 14px;
      height: 168px;
      width: 50%;
      border: 8px solid #fff;
      background: #858fe93f;
      margin-bottom: 2px;

      .menu-icon {
        margin-top: 32px;
        width: 48px;
        height: 48px;
        text-align: center;
        overflow: hidden;
        border-radius: 14px;
      }

      .menu-title {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #10275a;
        text-align: center;
      }

      .menu-subheading {
        margin-top: 6px;
        font-size: 12px;
        color: rgba(57, 57, 57, 1);
        text-align: center;
      }

      .menu-text-info {
        height: 50px;
      }
    }

    @mixin profile-menu-item($index, $color) {
      .menu-item-#{$index} {
        background: $color;
      }
    }

    @include profile-menu-item(1, #858fe940);
    @include profile-menu-item(2, #7fc9e740);
    @include profile-menu-item(3, #ffe4e440);
    @include profile-menu-item(4, #cbf9d840);
    @include profile-menu-item(5, #e0e3f9);
    @include profile-menu-item(6, #ffefeb);
  }
}
</style>
